<div class="navbar">
    <a href="javascript:void(0);" onclick="NS.back('pages/a.html');" class="left">
        <span class="common-icon"><span class="back-icon"></span><span class="back-icon-text">Back</span></span>
    </a>
  	<span class="title"></span>
    <a href="javascript:void(0);" onclick="NS.back('pages/a.html');" class="right">
        <span class="common-icon"><span>Home</span></span>
    </a>
</div>
<div class="container">
    <div class="sub-navbar"></div>
    <div class="result-list">
        <ul>
            <li class="estate-tab" data-estate="Estate 1">
                <img src="http://origin-images.ryland.com/GetImage.aspx?Type=community&Id=673&ImageId=789&Height=77&Width=116&v=1914382330"/>
                <ul class="info">
                    <li class="info-name">Estate 1 <a href="pages/c.html">next</a></li>
                    <li>Priced From: $245,990</li>
                    <li>Square Foot: 2405-3880</li>
                    <li>City: XXX</li>
                </ul>
            </li>
            <li class="estate-tab" data-estate="Estate 2">
                <img src="http://origin-images.ryland.com/GetImage.aspx?Type=community&Id=673&ImageId=789&Height=77&Width=116&v=1914382330"/>
                <ul class="info">
                    <li class="info-name">Estate 2</li>
                    <li>Priced From: $245,990</li>
                    <li>Square Foot: 2405-3880</li>
                    <li>City: XXX</li>
                </ul>
            </li>
            <li class="estate-tab" data-estate="Estate 3">
                <img src="http://origin-images.ryland.com/GetImage.aspx?Type=community&Id=673&ImageId=789&Height=77&Width=116&v=1914382330"/>
                <ul class="info">
                    <li class="info-name">Estate 3</li>
                    <li>Priced From: $245,990</li>
                    <li>Square Foot: 2405-3880</li>
                    <li>City: XXX</li>
                </ul>
            </li>
            <li class="estate-tab" data-estate="Estate 4">
                <img src="http://origin-images.ryland.com/GetImage.aspx?Type=community&Id=673&ImageId=789&Height=77&Width=116&v=1914382330"/>
                <ul class="info">
                    <li class="info-name">Estate 4</li>
                    <li>Priced From: $245,990</li>
                    <li>Square Foot: 2405-3880</li>
                    <li>City: XXX</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="footer">
	<a href="javascript:void(0);" onclick="NS.back('pages/a.html');"><span class="footer-btn">Back to Home</span></a>
</div>

<style>
    .footer-btn {
        width: 90%;
        padding: .6em 25px;
        margin: 50px auto 50px auto;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        zoom: 1;
        -moz-border-radius: 1em /*{global-radii-buttons}*/;
        -webkit-border-radius: 1em /*{global-radii-buttons}*/;
        border-radius: 1em /*{global-radii-buttons}*/;
        border-top: 1px solid white;
        border-color: rgba(255, 255, 255, .3);
        color: #1D4567;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
        border: 1px solid gray /*{c-bdown-border}*/;
        background: #FDFDFD /*{c-bdown-background-color}*/;
        font-weight: bold;
        text-shadow: 0 /*{c-bdown-shadow-x}*/ 1px /*{c-bdown-shadow-y}*/ 1px /*{c-bdown-shadow-radius}*/ white /*{c-bdown-shadow-color}*/;
        background-image: -webkit-linear-gradient(top, #EEE /*{c-bdown-background-start}*/, #FDFDFD /*{c-bdown-background-end}*/);
        background-image: -moz-linear-gradient(top, #EEE /*{c-bdown-background-start}*/, #FDFDFD /*{c-bdown-background-end}*/);
        background-image: -ms-linear-gradient(top, #EEE /*{c-bdown-background-start}*/, #FDFDFD /*{c-bdown-background-end}*/);
        background-image: -o-linear-gradient(top, #EEE /*{c-bdown-background-start}*/, #FDFDFD /*{c-bdown-background-end}*/);
        background-image: linear-gradient(top, #EEE /*{c-bdown-background-start}*/, #FDFDFD /*{c-bdown-background-end}*/);
        -moz-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,.3) /*{global-box-shadow-color}*/;
        -webkit-box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0, 0, 0, .3) /*{global-box-shadow-color}*/;
        box-shadow: 0px 1px 4px /*{global-box-shadow-size}*/ rgba(0, 0, 0, .3) /*{global-box-shadow-color}*/;
    }

    .footer-btn:hover {
        color: #111;
    }

    .estate-tab img {
        display: inline-block;
        float: left;
    }

    .estate-tab ul.info {
        padding: 5px;
        color: #1D4567;
        text-shadow: 0 1px 1px #F6F6F6;
        font-size: 12px;
        font-weight: normal;
        list-style: none;
        display: inline-block;
        float: left;
    }

    .estate-tab li.info-name {
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
    }

    .estate-tab li.info-name:hover {
        color: #2489CE;
    }



    .navbar {
        background-image: -webkit-linear-gradient(top, #255984, #16344E);
        background-image: -moz-linear-gradient(top, #255984, #16344E);
        background-image: -ms-linear-gradient(top, #255984, #16344E);
        background-image: -o-linear-gradient(top, #255984, #16344E);
        background-image: linear-gradient(top, #255984, #16344E);
        width: 100%;
        height: 42px;
        text-shadow: 0 -1px 1px black;
    }

    .navbar a {
        display: inline-block;
        position: absolute;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        border: 1px solid #222 /*{a-bup-border}*/;
        -moz-border-radius: 1em /*{global-radii-buttons}*/;
        -webkit-border-radius: 1em /*{global-radii-buttons}*/;
        border-radius: 1em /*{global-radii-buttons}*/;
        background: #333 /*{a-bup-background-color}*/;
        color: white /*{a-bup-color}*/;
        text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ black /*{a-bup-shadow-color}*/;
        background-image: -webkit-linear-gradient(top, #555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
        background-image: -moz-linear-gradient(top, #555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
        background-image: -ms-linear-gradient(top, #555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
        background-image: -o-linear-gradient(top, #555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
        background-image: linear-gradient(top, #555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
    }

    .navbar a.left {
        left: 10px;
        top: .4em;
    }

    .navbar a.right {
        right: 10px;
        top: .4em;
    }

    .navbar span.title {
        display: block;
        text-align: center;
        color: white;
        line-height: 40px;
        min-height: 24px;
        font-size: 16px;
        display: block;
        padding: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        outline: 0 !important;
        font-weight: bold;
    }

    .navbar span.common-icon {
        padding: .4em 8px .5em;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        zoom: 1;
        -moz-border-radius: 1em /*{global-radii-buttons}*/;
        -webkit-border-radius: 1em /*{global-radii-buttons}*/;
        border-radius: 1em /*{global-radii-buttons}*/;
        border-top: 1px solid white;
        border-color: rgba(255, 255, 255, .3);
    }

    .navbar span.back-icon {
        position: absolute;
        display: inline-block;
        top: 50%;
        left: 4px;
        margin-top: -9px;
        width: 18px;
        height: 18px;
        background: #666 /*{global-icon-color}*/;
        background: rgba(0, 0, 0, .4) /*{global-icon-disc}*/;
        background-image: url(http://origin-images.ryland.com/assets/images/mobile2/icons-18-white.png) /*{global-icon-set}*/;
        background-repeat: no-repeat;
        background-position: -144px 50%;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        border-radius: 9px;

    }

    .navbar span.back-icon-text {
        margin-left: 18px;
    }

    .container {
        width: 100%;
    }

    .sub-navbar {
        background-image: -webkit-linear-gradient(top, #8accf0, #ebf6fc);
        background-image: -moz-linear-gradient(top, #8accf0, #ebf6fc);
        background-image: -ms-linear-gradient(top, #8accf0, #ebf6fc);
        background-image: -o-linear-gradient(top, #8accf0, #ebf6fc);
        background-image: linear-gradient(top, #8accf0, #ebf6fc);
        width: 100%;
        height: 60px;
    }

    .result-list {
        width: 100%;
    }

    .result-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .result-list li.estate-tab {
        min-height: 77px;
        border-top: 1px solid #ccc;
        font-weight: bold;
        color: #111;
        text-shadow: 0 1px 1px white;
        cursor: pointer;
        background-image: -webkit-linear-gradient(top, #EEE, #FDFDFD);
        background-image: -moz-linear-gradient(top, #EEE, #FDFDFD);
        background-image: -ms-linear-gradient(top, #EEE, #FDFDFD);
        background-image: -o-linear-gradient(top, #EEE, #FDFDFD);
        background-image: linear-gradient(top, #EEE, #FDFDFD);
    }

    .result-list li.estate-tab:hover {
        background-image: -webkit-linear-gradient(top, #ededed, #dadada);
        background-image: -moz-linear-gradient(top, #ededed, #dadada);
        background-image: -ms-linear-gradient(top, #ededed, #dadada);
        background-image: -o-linear-gradient(top, #ededed, #dadada);
        background-image: linear-gradient(top, #ededed, #dadada);
    }
</style>

<script>

	KISSY.use('mobile/app/1.0/',function(S,MS){

		MS.startup(function(data){
			var app = this;
			var page = app.get('page');

			if(!data || !data.city) {
				return;
			}
			page.one('.title').html(data.city);	

			page.all('.estate-tab').on('click', function() {
				//debugger;
				var tab = page.one(this);
				app.forward('pages/c.html', {
					city: data.city,
					estate: tab.attr('data-estate')
				});
            });
		});
	});

</script>
